<template>
    <div class="allBox">
        <div class="top">
            <div class="top_svg">
                <img src="../utils/images/logo.png" width="200px" height="140px" />
            </div>
            <div class="top_title">
                <!-- <div class="top_title_item">搜索</div> -->
                <div class="top_title_item" @click="titkitToMinePage">我的</div>
                <div class="top_title_item font_css_red">购物车</div>
                <div class="top_title_item" @click="titkitToOrderPage">订单</div>
                <div class="top_title_item" @click="titckToSaleOutPage">售后</div>
                <div class="top_title_item" @click="titckToContentPage">联系我们</div>
            </div>
            <div class="top_user">
                <div class="top_user_welcome">
                <span class="welcome_span">欢迎：</span>
                <span class="welcome_user" style="color: lightpink">{{
                    orderListStore.userInfo.userName
                }}</span>
                </div>
                <div class="top_user_logo">
                <el-avatar :size="70" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
                </div>
            </div>
        </div>
        <div class="orderListDivCss">
            <div style="margin: 10px;" v-for="(item,index) in orderListStore.shoppingCarList" :key="index">
                <el-card style="max-width: 480px">
                    <template #header>
                        {{ item.imgName }}
                        <span style="margin-left: 20px;color: red;">{{ item.imgPrice }}</span>
                        <span style="margin-left: 20px">库存量：</span>
                        <span style="color: red;">{{ item.sale_num }}</span>
                        <span> 台</span>
                    </template>
                    <div style="height: 270px;overflow: hidden;">
                        <img :src="item.imgUrl" style="width: 200px" />
                    </div>
                    <template #footer>
                    <el-button type="success" @click="rightNowGetRent(item)">马上租用</el-button>
                    <el-button type="success" @click="rightNowGetSale(item)">马上购买</el-button>
                    <el-button type="danger" @click="forgitOrderListItem(item)">不想要了</el-button>
                    </template>
                </el-card>
            </div>
            <!-- 租用模块对话框 -->
            <el-dialog v-model="RentDialogVisible"  width="500" center>
                <div class="rentShopItemInfo">
                    <el-image style="width: 100px; height: 100px" :src="orderInfoRightNow.imgUrl" fit="fill" />
                    <div style="margin-left: 20px;">
                    <el-card style="max-width: 480px">
                        <p>原价: <span class="font_red_class">{{ orderInfoRightNow.imgPrice }}</span>/期</p>
                        <p>今日活动折扣: <span class="font_red_class">{{ orderListStore.pricePrent }}</span> 折</p>
                        <p>今日享租价: <span class="font_red_class">¥{{ Math.ceil((orderInfoRightNow.imgPrice.split('').slice(1).join(''))*orderListStore.pricePrent/10/12) }}</span>/期</p>
                    </el-card>
                    </div>
                    <div style="margin-left: 20px;">
                    <div><el-button type="success" @click="commitRentOrder()">提交订单</el-button></div>
                    <div style="margin-top: 30px;"><el-button type="primary" @click="commitRentOrderOther">其他方式</el-button></div>
                    </div>
                </div>
            </el-dialog>
            <!-- 购买模块对话框 -->
            <el-dialog v-model="SaleDialogVisible"  width="500" center>
                <div class="rentShopItemInfo">
                    <el-image style="width: 100px; height: 100px" :src="orderInfoRightNow.imgUrl" fit="fill" />
                    <div style="margin-left: 20px;">
                    <el-card style="max-width: 480px">
                        <p>原价: <span class="font_red_class">{{ orderInfoRightNow.imgPrice }}</span>/期</p>
                        <p>今日活动折扣: <span class="font_red_class">{{ orderListStore.pricePrent }}</span> 折</p>
                        <p>今日定音价: <span class="font_red_class">¥{{ Math.ceil((orderInfoRightNow.imgPrice.split('').slice(1).join(''))*(orderListStore.pricePrent/10)) }}</span></p>
                    </el-card>
                    </div>
                    <div style="margin-left: 20px;">
                    <div><el-button type="success" @click="commitSaleOrder">提交订单</el-button></div>
                    <div style="margin-top: 30px;"><el-button type="primary" @click="commitSaleOrderOther">其他方式</el-button></div>
                    </div>
                </div>
            </el-dialog>
            <!-- 商品列表为空时显示文字 -->
            <div v-if="orderListStore.shoppingCarList.length==0">
                暂无可查询的购物车收藏列表, 请前往主页添加商品
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
import { useOrderListStore } from '../store/OrderList';
import { ElMessage } from 'element-plus';

const orderListStore = useOrderListStore();
let router = useRouter();
let RentDialogVisible = ref(false);
let SaleDialogVisible = ref(false);
let orderInfoRightNow = ref({
  imgPrice:'',
  imgUrl:'',
  imgName:'',
  imgResInfo:'',
  orderType:'',
  _id:'',
  sale_num:''
});

function commitRentOrder(){
  //租用模式提交订单
  ElMessage({
    message: '已提交订单，请留意订单处理结果通知',
    type: 'success',
    showClose: true,
  });
  //去掉相关订单
  let forceId = ref(''); // 目标下标
  let newOrderList = ref(''); //新数组
  let orderListInfo = orderListStore.shoppingCarList // 数据数组
  orderListStore.shoppingCarList.forEach((r,index)=>{
    if(r._id == orderInfoRightNow.value._id){
      // console.log(r,index)
      forceId.value = index
    }
  })
  if(forceId.value || forceId.value === 0){
    newOrderList.value = orderListInfo.splice(forceId.value,1)
  };
  //改变订单列表
  orderListStore.setNewOrderList(newOrderList)
  //关闭弹窗
  RentDialogVisible.value = !RentDialogVisible.value
};
function commitSaleOrder(){
  //购买模式提交订单
  ElMessage({
    message: '已提交订单，请留意订单处理结果通知',
    type: 'success',
    showClose: true,
  });
  //去掉相关订单
  let forceId = ref(''); // 目标下标
  let newOrderList = ref(''); //新数组
  let orderListInfo = orderListStore.shoppingCarList // 数据数组
  orderListStore.shoppingCarList.forEach((r,index)=>{
    if(r._id == orderInfoRightNow.value._id){
      // console.log(r,index)
      forceId.value = index
    }
  })
  if(forceId.value || forceId.value === 0){
    newOrderList.value = orderListInfo.splice(forceId.value,1)
  };
  //改变订单列表
  orderListStore.setNewOrderList(newOrderList)
  //关闭弹窗
  SaleDialogVisible.value = !SaleDialogVisible.value
};
function rightNowGetRent(orderInfo){
  //马上租用事件
  //打开弹窗
  RentDialogVisible.value = !RentDialogVisible.value
  // console.log(value)
  orderInfoRightNow.value = orderInfo
};

function rightNowGetSale(orderInfo){
  //马上购买事件
  //打开弹窗
  SaleDialogVisible.value = !SaleDialogVisible.value
  orderInfoRightNow.value = orderInfo
};

function commitRentOrderOther(){
  ElMessage({
    message: '已提交申请，请留意卖家结果通知',
    type: 'success',
    showClose: true,
  });
  //去掉相关订单
  let forceId = ref(''); // 目标下标
  let newOrderList = ref(''); //新数组
  let orderListInfo = orderListStore.shoppingCarList // 数据数组
  orderListStore.shoppingCarList.forEach((r,index)=>{
    if(r._id == orderInfoRightNow.value._id){
      // console.log(r,index)
      forceId.value = index
    }
  })
  if(forceId.value || forceId.value === 0){
    newOrderList.value = orderListInfo.splice(forceId.value,1)
  };
  //改变订单列表
  orderListStore.setNewOrderList(newOrderList)
  //关闭弹窗
  RentDialogVisible.value = !RentDialogVisible.value
}

function commitSaleOrderOther(){
  ElMessage({
    message: '已提交申请，请留意卖家结果通知',
    type: 'success',
    showClose: true,
  });
  //去掉相关订单
  let forceId = ref(''); // 目标下标
  let newOrderList = ref(''); //新数组
  let orderListInfo = orderListStore.shoppingCarList // 数据数组
  orderListStore.shoppingCarList.forEach((r,index)=>{
    if(r._id == orderInfoRightNow.value._id){
      // console.log(r,index)
      forceId.value = index
    }
  })
  if(forceId.value || forceId.value === 0){
    newOrderList.value = orderListInfo.splice(forceId.value,1)
  };
  //改变订单列表
  orderListStore.setNewOrderList(newOrderList)
  //关闭弹窗
  SaleDialogVisible.value = !SaleDialogVisible.value
}

function forgitOrderListItem(orderInfo){
  //不想要了功能
  ElMessage({
    message: '该商品已从您的订单列表删除',
    type: 'success',
    showClose: true,
  });
  //首先改变渲染数据
  orderInfoRightNow.value = orderInfo
  //去掉相关订单
  let forceId = ref(''); // 目标下标
  let newOrderList = ref(''); //新数组
  let orderListInfo = orderListStore.shoppingCarList // 数据数组
  orderListStore.shoppingCarList.forEach((r,index)=>{
    if(r._id == orderInfoRightNow.value._id){
      // console.log(r,index)
      forceId.value = index
    }
  })
  if(forceId.value || forceId.value === 0){
    newOrderList.value = orderListInfo.splice(forceId.value,1)
  };
  //改变订单列表
  orderListStore.setNewOrderList(newOrderList)
}

function titkitToMinePage(){
    //跳转我的页面
    router.push('/shop')
}
function titkitToOrderPage(){
    //跳转至订单页
    router.push('/order')
}
function titckToSaleOutPage(){
  //跳转售后页面
  router.push('/saleOut')
}
function titckToContentPage(){
  //跳转至联系我们
  router.push('/content')
}
</script>

<style scoped>
.allBox {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  overflow: auto;
  scrollbar-width: none;
}
.allBox::-webkit-scrollbar {
  display: none;
}
.top {
  height: 140px;
  display: flex;
}
.top_svg {
  width: 200px;
}
.top_title {
  width: 70vw;
  display: flex;
  padding: 0 20px;
}
.top_title_item {
  width: 100px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(75, 188, 225);
  font-size: 20px;
  margin: 0 20px;
}
.top_title_item:hover {
  font-size: 25px;
  cursor: pointer;
}
.top_user {
  flex: 1;
  display: flex;
}
.top_user_welcome {
  width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.welcome_span {
  font-style: oblique;
  font-size: 20px;
}
.top_user_logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.top_user_logo_box {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}
.font_css_red{
    color: red;
}
.orderListDivCss{
  border-top: 1px solid #0a0a0a;
  display: flex;
  padding: 10px 70px;
  flex-wrap: wrap;
}
.rentShopItemInfo{
  box-sizing: border-box;
  display: flex;
}
</style>